<template>
  <view class="content">
    <button open-type="contact" @tap="linkCustomer" class="common_style">
      在线联系客服
    </button>
    <view class="operate common_style">操作说明</view>
    <view v-if="current === 1">
      <view class="tip common_style">
        输入产品卖点和名称,
        系统自动生成视频片段的镜头,可以按照镜头来拍摄.也可以选择直接跳过
      </view>
      <view>
        <uni-forms ref="lensform" :modelValue="lensformData" :rules="rules">
          <view class="uni-form-item uni-column">
            <view class="title common_style">产品卖点</view>
            <uni-forms-item name="product_name">
              <textarea
                class="uni-textarea"
                placeholder="请输入"
                v-model="lensformData.product_name"
              />
            </uni-forms-item>
          </view>
          <view class="uni-form-item uni-column">
            <view class="title common_style">产品名称</view>
            <uni-forms-item name="seller_point">
              <textarea
                class="uni-textarea"
                placeholder="请输入"
                v-model="lensformData.seller_point"
              />
            </uni-forms-item>
          </view>
          <view class="uni-btn-v">
            <!-- <button
              type="default"
              class="btn-item"
              style="margin-right: 10rpx"
              @tap="current = 2"
            >
              跳过该步骤直接下一步
            </button> -->
            <button @tap="formSubmit" class="btn-item">下一步 生成镜头</button>
          </view>
        </uni-forms>
      </view>
    </view>
    <view v-if="current === 2">
      <view class="tip common_style">
        可以根据AI生成的镜头, 在每个镜头里上传N个视频, 系统 会自动剪切视频,
        加上语音解说和背景音乐, 也可以自己决 定需要哪些镜头
      </view>
      <view class="add_capture_container">
        <button
          size="default"
          type="default"
          class="add_capture common_style"
          @tap="addCamrea"
        >
          添加新镜头
        </button>
      </view>
      <view v-for="(item, index) in capture_list" :key="index">
        <view class="capture">
          <view class="capture_label">
            {{ "镜头" + grouplabel[index] }}
            {{ item.label ? "(" + item.label + ")" : "" }}
          </view>
          <button
            type="default"
            class="uploader-input"
            @tap="deleteCamrea(index)"
          >
            删除
          </button>
        </view>
        <view class="video_group">
          <button class="camera" @tap="chooseUploads(index)">上传视频</button>
          <view
            class="video_box"
            v-for="(info, cindex) in item.value"
            :key="cindex"
          >
            <view class="video_del" @tap.prevent="delVideo(index, cindex)"
              >x</view
            >
            <video :src="info" class="camera" controls></video>
          </view>
        </view>
      </view>
      <button type="default" class="btn-item create_video" @tap="handleTitle">
        下一步 生成视频标题
      </button>
    </view>
    <view v-if="current === 3" style="width: 100%">
      <view class="tip common_style"> 请选择视频标题 </view>
      <uni-forms
        ref="titleform"
        :modelValue="titleFormData"
        :rules="titlerules"
      >
        <uni-forms-item name="titles">
          <checkbox-group @change="onTitleChange">
            <label
              v-for="item in title_list"
              :key="item"
              style="display: flex; margin-top: 30rpx; align-items: center"
            >
              <checkbox :value="item" style="width: 60rpx"> </checkbox>
              <view style="margin-left: 20rpx; width: calc(100% - 60rpx)">{{
                item
              }}</view>
            </label>
          </checkbox-group>
        </uni-forms-item>
        <uni-forms-item>
          <button
            type="default"
            class="btn-item create_video"
            @tap="titleFormSubmit"
          >
            下一步 生成视频口播
          </button>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view v-if="current === 4">
      <view class="tip common_style">
        通过输入关键词,生成对需要推广的产品的口播介绍,系统将自动转为音频,生成后,请勾选需要使用的口播文案
      </view>
      <view>
        <button
          type="default"
          class="btn-item"
          style="margin-top: 40rpx"
          @tap="formSubmitMouse"
        >
          生成或再换一批
        </button>
      </view>
      <uni-forms ref="shopform" :modelValue="shopformData" :rules="shoprules">
        <uni-forms-item name="orals">
          <checkbox-group @change="onOralChange">
            <label
              v-for="item in orals_list"
              :key="item"
              style="display: flex; margin-top: 30rpx; align-items: center"
            >
              <checkbox :value="item" style="width: 60rpx"> </checkbox>
              <view style="margin-left: 20rpx; width: calc(100% - 60rpx)">{{
                item
              }}</view>
            </label>
          </checkbox-group>
        </uni-forms-item>
        <uni-forms-item>
          <button @tap="shopFormSubmit" class="btn-item create_video">
            下一步 选择店铺地址
          </button>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view v-if="current === 5" class="choice_shop">
      <view class="tip common_style"> 输入您的店铺名称 </view>
      <uni-forms
        ref="createform"
        :modelValue="createFormData"
        :rules="createRules"
      >
        <uni-forms-item name="poi">
          <uni-combox
            emptyTips="暂无数据"
            @input="handlePoi"
            :candidates="shop_list"
            v-model="createFormData.poi"
          ></uni-combox>
        </uni-forms-item>
        <uni-forms-item>
          <button
            @tap="createFormSubmit"
            class="creating_video"
            :disabled="created"
          >
            {{ created ? "生成中...." : "生成视频 预计需要等待10分钟" }}
          </button>
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
// import OSS from "@/utils/oss.js";
import { alUploadFile } from "@/uni_modules/qying-alUpload/js_sdk/alUpload";
import { getMaxSubArrayLength } from "@/utils/common.js";
import {
  lensGenerate,
  oralGenerate,
  poiSearch,
  clipTaskCreate,
  titleGenerate,
} from "@/api/index";
export default {
  data() {
    return {
      lensformData: {
        product_name: "",
        seller_point: "",
      },
      titleFormData: {
        titles: "",
      },
      shopformData: {
        orals: [],
      },
      createFormData: {
        poi: "",
      },
      rules: {
        product_name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入产品卖点",
            },
          ],
        },
        seller_point: {
          rules: [
            {
              required: true,
              errorMessage: "请输入产品名称",
            },
          ],
        },
      },
      titlerules: {
        titles: {
          rules: [
            {
              required: true,
              errorMessage: "请选择标题",
            },
          ],
        },
      },
      shoprules: {
        orals: {
          rules: [
            {
              required: true,
              errorMessage: "请选择口播",
            },
          ],
        },
      },
      createRules: {
        poi: {
          rules: [
            {
              required: true,
              errorMessage: "请选择poi",
            },
          ],
        },
      },
      title: "拍摄",
      current: 1,
      capture_list: [],
      created: false,
      grouplabel: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"],
      orals_list: [],
      shop_list: [],
      shop_obj_list: [],
      poiData: [],
      title_list: [],
    };
  },
  onTabItemTap() {
    console.log("itemTap");
    this.lensformData.product_name = "";
    this.lensformData.seller_point = "";
    this.shopformData.orals = [];
    this.createFormData.poi = "";
    this.current = 1;
    this.capture_list = [];
    this.created = false;
    this.orals_list = [];
    this.shop_list = [];
    this.shop_obj_list = [];
    this.poiData = [];
    this.title_list = [];
  },
  methods: {
    linkCustomer() {
      wx.openCustomerServiceChat({
        extInfo: { url: "" },
        corpId: "",
        success(res) {
          console.log("rrrr", res);
        },
      });
    },
    onOralChange(val) {
      this.shopformData.orals = val.detail.value;
    },
    onTitleChange(val) {
      this.titleFormData.titles = val.detail.value;
    },
    handleTitle() {
      const number = getMaxSubArrayLength(this.capture_list) || 0;
      const total = this.capture_list.reduce((pre, cur) => {
        return pre + cur.value.length;
      }, 0);
      if (total < 2) {
        uni.showToast({
          title: "镜头数必须大于或等于2",
          icon: "none",
        });
      } else {
        this.current = 3;
        titleGenerate({
          product_name: this.lensformData.product_name,
          seller_point: this.lensformData.seller_point,
          number,
        }).then((res) => {
          if (res.code === 0) {
            this.title_list = res.data.titles;
          }
          console.log("res, res", res);
        });
      }
    },
    handlePoi(val) {
      poiSearch({ keyword: val }).then((res) => {
        if (res.code === 0) {
          this.shop_list = res.data.map((item) => {
            return item.poi_name;
          });
          this.shop_obj_list = res.data;
        }
      });
    },
    addCamrea() {
      this.capture_list.push({
        value: [],
      });
    },
    deleteCamrea(index) {
      this.capture_list.splice(index, 1);
    },
    delVideo(index, cindex) {
      this.capture_list[index].value.splice(cindex, 1);
    },
    chooseUploads(index) {
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: (res) => {
          const fileName = res.tempFilePath.split("/").pop();
          // OSS.uploadFileToTencentClound(fileName, res.tempFilePath).then(
          //   (res) => {
          //     this.capture_list[index].value.push(res);
          //   }
          // );
          alUploadFile(res.tempFilePath).then((res) => {
            console.log("222222", res.file);
            this.capture_list[index].value.push(res.file);
          });
        },
        fail: (err) => {
          console.log("err", err);
        },
      });
    },
    formSubmit: function () {
      this.$refs.lensform
        .validate()
        .then((res) => {
          lensGenerate({
            product_name: res.product_name,
            seller_point: res.seller_point,
          }).then((res) => {
            if (res.code === 0) {
              this.capture_list = res.data.lens.map((item) => {
                return { label: item, value: [] };
              });
              this.current = 2;
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
    formSubmitMouse: function (e) {
      oralGenerate({
        product_name: this.lensformData.product_name,
        seller_point: this.lensformData.seller_point,
        number: getMaxSubArrayLength(this.capture_list) || 0,
      })
        .then((res) => {
          if (res.code === 0) {
            this.orals_list = [...res.data.orals, ...this.orals_list];
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        })
        .catch((err) => {
          console.log("oralerr", err);
        });
    },
    titleFormSubmit: function () {
      this.$refs.titleform
        .validate()
        .then((res) => {
          this.current = 4;
          this.formSubmitMouse();
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
    shopFormSubmit: function () {
      this.$refs.shopform
        .validate()
        .then((res) => {
          console.log("res", res);
          this.current = 5;
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
    createFormSubmit: function (e) {
      const captures = this.capture_list.filter(
        (item) => item.value.length > 0
      );
      let videos = [];
      captures.forEach((item) => {
        videos.push(item.value);
      });
      const orals = this.shopformData.orals;
      this.$refs.createform
        .validate()
        .then((res) => {
          const poi = this.shop_obj_list.filter(
            (item) => item.poi_name === res.poi
          )[0]?.poi;
          this.created = true;
          clipTaskCreate({
            orals,
            videos,
            poi,
            titles: this.titleFormData.titles,
          })
            .then((res) => {
              console.log("res");
            })
            .catch((err) => {
              console.log("表单错误信息：", err);
            });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>

<style>
.common_style {
  font-size: 30rpx;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 50rpx;
}
.operate {
  width: 100%;
  text-align: left;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}
.tip {
  margin-bottom: 80rpx;
}
.title {
  margin-top: 30rpx;
  margin-bottom: 20rpx;
}
.uni-textarea {
  border: 1px solid #d0cccc;
  width: 100%;
}
.uni-btn-v {
  display: flex;
  margin-top: 30rpx;
}
.btn-item {
  font-size: 26rpx;
  width: 50%;
}
.add_capture_container {
  width: 100%;
  justify-content: space-between;
}
.add_capture {
  width: 200rpx;
  margin-left: 0;
  font-size: 26rpx;
}
.capture {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.camera {
  width: 147rpx;
  height: 147rpx;
  font-size: 20rpx;
  margin: 0;
  margin-right: 8rpx;
}
.uploader-input {
  width: 130rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  margin: 0;
}
.create_video {
  margin-top: 100rpx;
}
.creating_video {
  font-size: 26rpx;
  margin-top: 160rpx;
  width: 400rpx;
}
.desc_item {
  margin-top: 30rpx;
}
.choice_shop {
  width: 100%;
}
.capture_label {
  font-size: 24rpx;
}
.video_group {
  display: flex;
  gap: 10rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}
.video_box {
  position: relative;
}
.video_del {
  position: absolute;
  top: -25rpx;
  right: -5rpx;
  z-index: 100000;
}
.checkbox-item {
  display: flex;
  align-items: center;
}
</style>
